<template>
  <div class="search">
    <!-- 搜索栏 -->
    <div>
      <el-form ref="form" :model="searchData" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="门店搜索"> <el-input v-model="searchData.search_value" placeholder="请输入门店名称/门店地址"></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-select clearable v-model="searchData.created_id" multiple @click="opendept" @change="changedept" placeholder="请选择创建人" popper-class="zw-hide_select_option">
                <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间" class="selectTime" prop="start_time">
              <el-date-picker v-model="searchData.created_time" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="门店状态">
              <el-select v-model="searchData.store_status" :label="label">
                <el-option label="全部" value="-1"></el-option>
                <el-option label="开启" value="1"></el-option>
                <el-option label="关闭" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 搜索操作按钮 -->
          <div style="margin-left: 20px">
            <el-button type="primary" @click="query">查询</el-button>
            <el-button @click="remove">清空</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
  </div>
  <div class="tablelist">
    <div class="table-top">
      <div>
        <el-button @click="operate(1)" :disabled="allids.length == 0">批量关店</el-button>
        <el-button @click="operate(2)" :disabled="allids.length == 0">批量开店</el-button>
        <el-button @click="operate(3)" :disabled="allids.length == 0">批量下载</el-button>
        <el-button @click="ImportStore()">导入门店</el-button>
        <el-button type="primary" @click="getNewStore">新建门店</el-button>
      </div>
    </div>
    <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%" :header-cell-style="{ background: '#F9F9F9' }">
      <el-table-column type="selection" width="80" fixed="left" />
      <el-table-column prop="words_name" label="编码" width="60">
        <template #default="scope">
          <div>{{ scope.$index + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="store_name" label="名称" width="140"> </el-table-column>
      <el-table-column prop="store_address" label="地址" width="150"> </el-table-column>
      <el-table-column prop="regional_area" label="行政区域" width="130"> </el-table-column>
      <el-table-column prop="group_name" label="经纬度" width="160">
        <template #default="scope">
          <div>经度{{ scope.row.lon }},<br />纬度{{ scope.row.lat }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="staff_num" label="门店数员工" width="120"> </el-table-column>
      <el-table-column prop="group_name" label="所属分组" width="120"> </el-table-column>
      <el-table-column prop="created_name" label="创建人" width="120"> </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="160"> </el-table-column>
      <el-table-column prop="store_status" label="营业状态" width="160">
        <template #default="scope">
          <div v-if="scope.row.store_status == 1" style="color: #60b900">正常</div>
          <div v-if="scope.row.store_status == 2" style="color: #969696">关闭</div>
          <div v-if="scope.row.store_status == -1" style="color: #333333">全部</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="StogeChange(scope.row, 1)" v-if="scope.row.store_status == 1">关店</el-button>
          <el-button size="small" @click="StogeChange(scope.row, 2)" v-if="scope.row.store_status == 2">开店</el-button>
          <el-button size="small" @click="Editadd(scope.row)">编辑</el-button>
          <el-button size="small" @click="download(scope.row)">下载</el-button>
          <el-button size="small" @click="StoreStaff(scope.row)">门店员工</el-button>
          <el-button size="small" @click="deleteline(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ '暂无数据' }}</div>
      </template>
    </el-table>
    <ZWPagination ref="paginationRef" @submit="getPagination" />

    <!-- //删除 开启 关闭弹框 -->
    <Dialog :appDialog="appDialog"
      ><div class="content">{{ content }}</div></Dialog
    >
    <!-- 门店员工  -->
    <ZWDrawer ref="DetailedRef" @confirm="handleconfirm">
      <detailed :id="cus_import_id" :key="cus_import_id" />
    </ZWDrawer>
    <!-- 录入客户 -->
    <ImportCustomer ref="ImportCustomerRef" :selectid="selectid" @cancel="closeImportCustomer" @save="getListFun" />
    <!-- 创建人弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, reactive, computed } from 'vue'
import Dialog from '@/components/Dialog.vue'
import ZWPagination from '@/components/ZWPagination.vue'
import ZWDrawer from '@/components/ZWDrawer.vue'
import ZWDepart from '@/components/ZWDepart.vue'
import detailed from './detailed.vue'
import ImportCustomer from './ImportCustomer.vue'
import { getSetionId } from '@/utils/utils'
import { store } from '@/store'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { getGroupList, getStogeDownload, getSensitivelist, getStogeChange, getStogeDel } from '@/api/employe/storemanagement/sensitiveWord'
const pro = defineProps(['selectid'])
const emit = defineEmits(['submit', 'cancel'])
let allids = ref([]) //批量删除列表
let ids = ref([]) //删除列表
let content = ref('确定开启所选关键词吗?')
let type = ref(21)
const selectid = ref(pro.selectid)
const DetailedRef = ref(null)
const DepartRef = ref(null)
const creators = ref([])
const store_ids = ref([])
const isShow = ref(true)
let cus_import_id = ref('')
let times = ref([])
const ImportCustomerRef = ref(null)
// 选中复选框
const table = computed(() => {
  return store.getters['table']
})
// 选择IDList
const sectionIds = ref([])

const tableData = ref([])
const searchData = reactive({
  search_value: '',
  created_id: [],
  store_status: '-1',
  created_time: []
})
const paginationRef = ref(null)
// 分组 tree
const groupData = ref([])
// 分组列表
const group_id = () => {
  return store.getters['content/group']
}
const page = reactive({
  page: 1,
  page_size: 15
})
const addGroupingForm = reactive({
  group_id: '', //所属分组ID
  words_name: '', //敏感词
  status: 1
})
const props = {
  checkStrictly: true,
  emitPath: false,
  label: 'name',
  value: 'id'
}
//打开员工弹窗
const opendept = () => {
  DepartRef.value.selectedMember = creators.value
  DepartRef.value.departVisble = true
  console.log(creators.value, 222222222)
  DepartRef.value.title = '选择群组/创建人'
}
const getDepart = (res: any) => {
  creators.value = res
  searchData.created_id = getSetionId('id', creators.value)
  DepartRef.value.departVisble = false
}
//跳转新建门店
const getNewStore = () => {
  router.push(`/employee/storemanagement/storelist/detail`)
}
// 取消
const cancelHandel = () => {
  emit('cancel')
  appDialog.visible = false
}
// 门店员工
const StoreStaff = (data: any) => {
  DetailedRef.value.width = 1000
  DetailedRef.value.drawer = true
  DetailedRef.value.isShow = false
  DetailedRef.value.title = '门店员工'
  isShow.value = false
  cus_import_id.value = data.id
}
// 导入门店
const ImportStore = (data: any) => {
  setTimeout(() => {
    ImportCustomerRef.value.appDialog.visible = true
  }, 0)
}
const closeImportCustomer = () => {
  ImportCustomerRef.value.visible = false
}
// 批量开店关店
const StogeChange = (data: any, type: any) => {
  console.log(type, data, 'type')
  ids.value = []
  appDialog.visible = true
  appDialog.title = type == 2 ? '开店提醒' : '关店提醒'
  content.value = type == 2 ? '确定开店吗？' : '确定关店吗？'
  ids.value.push(data.id)
  console.log(ids.value, 'sectionIds.valuesectionIds.value')
}
//开店关店下载
const operate = (data: any) => {
  appDialog.visible = true
  appDialog.title = data == 1 ? '批量关店提醒' : data == 2 ? '批量开店提醒' : '批量下载提醒'
  content.value = data == 1 ? '确定关店吗?' : data == 2 ? '确定开店吗？' : '确定下载所选内容吗？'
}
//删除
const deleteline = (data: any) => {
  ids.value = []
  appDialog.visible = true
  appDialog.title = '删除提醒'
  content.value = '确定删除当前门店吗？'
  ids.value.push(data.id)
}
// const deleteline = (val: any, type: any) => {
//   ids.value = []
//   appDialog.visible = true
//   appDialog.title = '批量开店'
//   content.value = '确定删除吗？'
//   ids.value.push(val.id)
// }
//开启 关闭
const submitHandel = async () => {
  console.log(allids.value, 'allids.value')
  if (appDialog.title == '下载提醒' || appDialog.title == '批量下载提醒') {
    let param = {
      store_ids: appDialog.title == '下载提醒' ? ids.value : allids.value
    }
    getStogeDownload(param).then((res: any) => {
      appDialog.visible = false
      window.open(res.url)
      ElMessage({ message: '下载成功', type: 'success' })
    })
  } else if (appDialog.title == '开店提醒' || appDialog.title == '批量开店提醒') {
    let param = {
      store_ids: appDialog.title == '开店提醒' ? ids.value : allids.value,
      type: 1
    }
    getStogeChange(param).then((res: any) => {
      appDialog.visible = false
      ElMessage({ message: '开店成功', type: 'success' })
      initpage()
    })
  } else if (appDialog.title == '关店提醒' || appDialog.title == '批量关店提醒') {
    let param = {
      store_ids: appDialog.title == '关店提醒' ? ids.value : allids.value,
      type: 2
    }
    getStogeChange(param).then((res: any) => {
      appDialog.visible = false
      ElMessage({ message: '关店成功', type: 'success' })
      initpage()
    })
  }
  if (appDialog.title == '删除提醒') {
    let param = {
      store_ids: ids.value
    }
    getStogeDel(param).then((res: any) => {
      appDialog.visible = false
      ElMessage({ message: '删除成功', type: 'success' })
    })
  }
}

const appDialog = reactive({
  visible: false,
  title: '删除提醒',
  width: '400px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '确定'
})
//获取表格列表
const getSensitive = (data?: any) => {
  var search = JSON.parse(JSON.stringify(searchData))
  // search.status = search.status == '全部' ? 0 : search.status == '开启' ? 1 : 2
  let parm = {
    ...search,
    page: data.page,
    page_size: data.page_size,
    group_id: pro.selectid
  }
  getSensitivelist(parm).then((res: any) => {
    store.dispatch('pageTotal', res.total)
    tableData.value = res.data
  })
}
const initpage = () => {
  getSensitive(page)
}
initpage()
const getPagination = (data: any) => {
  page.page = data.value.page
  page.page_size = data.value.page_size
  initpage()
}
//搜索
const query = () => {
  initpage()
}
const remove = () => {
  searchData.search_value = ''
  searchData.store_status = '-1'
  initpage()
}
// 获取分组列表详情
const getGroup = () => {
  getGroupList({
    type: type.value
  }).then((res: any) => {
    let result: any[] = [
      {
        name: '全部分组',
        id: 'all',
        nums: 0,
        children: []
      }
    ]
    if (res.data.length > 0) {
      result[0].nums = res.total
      result[0].children = res.data
    }
    groupData.value = result as any
  })
}
getGroup()
const closeClick = (val: any, num: any) => {
  ids.value = []
  appDialog.visible = true
  appDialog.title = num == 2 ? '开启提醒' : '关闭提醒'
  content.value = num == 2 ? '确定开启吗？' : '确定关闭吗？'
  ids.value.push(val.id)
}
const handleSelectionChange = (val: any) => {
  allids.value = []
  val.forEach((item) => {
    allids.value.push(item.id)
  })
  console.log(allids.value)
}

const download = (val: any) => {
  ids.value = []
  appDialog.visible = true
  appDialog.title = '下载提醒'
  content.value = '确定下载吗？'
  ids.value.push(val.id)
}
// 选中的内容
watch(table, (table) => {
  sectionIds.value = getSetionId('id', table.tableData)
})
defineExpose({
  initpage
})
</script>
<style lang="scss" scoped>
:deep.el-button--small {
  margin-bottom: 10px;
}
.search {
  background-color: #f9f9f9;
  padding: 16px 16px 0 16px;
  display: flex;
  justify-content: space-between;
}
.tablelist {
  .tips {
    padding: 9px;
    font-size: 12px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #969696;
    line-height: 12px;
    background: #f9f9f9;
  }
  .content {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .table-top {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 15px 0;
  }
}
</style>
